<template>
  <div class="roster">
    <div v-show="!isShowCompanyDetails">
      <PageTitle :goBack="false" title="供应商名单" :border="true" />
      <div class="myCardCss" style="height: 100%; width: 100%;padding-top: 0;">
        <a-tabs v-model:activeKey="activeKey" @change="changeTab">
          <a-tab-pane :key="'WHITE'" tab="供应商白名单">
            <div class="listData" v-if="listData.length">
              <div class="addBtn" style="border-radius: 4px" @click="openAdd">添加白名单</div>
            </div>
            <div class="noData" v-if="!listData.length" style="margin-top: -50px">
              <img src="../../../assets/images/noData.png" alt="" />
              <div>暂无白名单数据</div>
              <a-button type="primary" danger style="margin-top: 20px" @click="openAdd"
                >添加白名单</a-button
              >
            </div>
          </a-tab-pane>
          <a-tab-pane :key="'FOCUS'" tab="供应商重点关注名单">
            <div class="listData" v-if="listData.length">
              <div class="addBtn" style="border-radius: 4px" @click="openAdd">添加重点关注名单</div>
            </div>
            <div class="noData" v-if="!listData.length" style="margin-top: -50px">
              <img src="../../../assets/images/noData.png" alt="" />
              <div>暂无重点关注名单数据</div>
              <!-- <div class="addBtn" @click="openAdd">添加重点关注名单</div> -->
              <a-button type="primary" danger style="margin-top: 20px" @click="openAdd"
                >添加重点关注名单</a-button
              >
            </div>
          </a-tab-pane>
          <a-tab-pane :key="'BLACK'" tab="供应商黑名单">
            <div class="listData">
              <div class="typeListDiv">
<!--                <div-->
<!--                  class="typeItem"-->
<!--                  :class="typeIndex === 0 ? 'active' : ''"-->
<!--                  @click="changeType(0)"-->
<!--                  >全部名单</div-->
<!--                >-->
                <div
                  class="typeItem"
                  :class="typeIndex === 1 ? 'active' : ''"
                  @click="changeType(1)"
                  >自主添加</div
                >
                <div
                  class="typeItem"
                  :class="typeIndex === 2 ? 'active' : ''"
                  @click="changeType(2)"
                  >信用中国不良</div
                >
                <div
                  class="typeItem"
                  :class="typeIndex === 3 ? 'active' : ''"
                  @click="changeType(3)"
                  >国能集团黑名单</div
                >
                <div
                  class="typeItem"
                  :class="typeIndex === 4 ? 'active' : ''"
                  @click="changeType(4)"
                  style="border-radius: 0 4px 4px 0"
                  >其他央企不良</div
                >
                <div
                  v-if="typeIndex === 1 || typeIndex === 3"
                  class="addBtn addBtn1"
                  @click="openAdd"
                  style="float: right; border-radius: 4px"
                  >添加黑名单</div
                >
              </div>
            </div>
            <div class="noData" v-if="!listData.length && (typeIndex === 1 || typeIndex === 3)" style="margin-top: -50px">
              <img src="../../../assets/images/noData.png" alt="" />
              <div>暂无黑名单数据</div>
              <a-button type="primary" danger style="margin-top: 20px" @click="openAdd"
                >添加黑名单</a-button
              >
            </div>
          </a-tab-pane>
        </a-tabs>
        <a-table
          :dataSource="listData"
          :columns="
            activeKey !== 'BLACK'
              ? columns
              : typeIndex === 1 || typeIndex === 3
              ? columnsByBlackByZutj
              : columnsByBlack
          "
          :pagination="false"
          v-if="listData.length"
          :scroll="{ x: 1500, y: 520 }"
        >
          <template #index="{ index }">
            {{ index + 1 + (pageForm.limit - 1) * pageForm.size }}
          </template>
          <template #companyName="{ record }">
            <label
              style="color: #1473dc; cursor: pointer"
              @click="openCompanyDetails(record.companyId)"
              >{{ record.companyName }}</label
            >
          </template>
          <template #createUser="{ record }">
            {{ record.createUserId ? record.createUserId?.name : '' }}
          </template>
          <template #sources="{ record }" v-if="false">
            {{
              record.sources == 'manu'
                ? '自主添加'
                : record.sources == 'credit_china'
                ? '信用中国不良'
                : record.sources == 'nea'
                ? '国能集团黑名单'
                : '其他央企不良'
            }}
          </template>
          <template #operation="{ record }">
            <!-- <a-popconfirm
              title="是否确定移除?"
              ok-text="是"
              cancel-text="否"
              @confirm="confirmDel(record.id)"
              @cancel="cancelDel"
            >
              <a style="color: #1473dc">移除</a>
            </a-popconfirm> -->
            <a style="color: #1473dc" @click="openDelBox(record.id)">移除</a>
          </template>
        </a-table>
        <!-- <a-pagination
          size="small"
          :total="pageForm.total"
          :pageSize="pageForm.size"
          :current="pageForm.limit"
          :hideOnSinglePage="true"
          @change="changePage"
          :showSizeChanger="false"
          style="margin-top: 30px; float: right"
        /> -->
      </div>
      <div class="otherPagination">
        <div class="seizeASeat"> </div>
        <a-pagination
          size="small"
          :total="pageForm.total"
          :pageSize="pageForm.size"
          :current="pageForm.limit"
          :hideOnSinglePage="true"
          @change="changePage"
          :showSizeChanger="false"
          class="pag"
        />
      </div>
    </div>
    <a-modal
      v-if="isShowAdd"
      v-model:visible="isShowAdd"
      :maskClosable="false"
      :width="600"
      :centered="true"
      okText="确认添加"
      :title="
        '添加' +
        (activeKey === 'WHITE' ? '白名单' : activeKey === 'BLACK' ? '黑名单' : '重点关注名单')
      "
      @ok="addData"
    >
      <a-form
        :model="addForm"
        ref="addLabelRef"
        :label-col="{ span: 6 }"
        :wrapper-col="12"
        style="margin-top: 16px"
      >
        <a-form-item
          label="企业名称"
          name="companyName"
          :rules="[{ required: true, message: '请输入企业名称' }]"
        >
          <a-select
            v-model:value="addForm.companyName"
            show-search
            placeholder=""
            style="width: 400px"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="getSearchList"
            @change="onSelect"
          >
            <a-select-option :value="item.cityId" v-for="(item, index) in companyList" :key="index">
              <label v-html="item.companyName"></label>
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="统一社会信用代码">
          <a-input v-model:value="addForm.creditCode" style="width: 400px" />
        </a-form-item>
        <a-form-item label="法人代表">
          <a-input v-model:value="addForm.corporationName" style="width: 400px" />
        </a-form-item>
        <a-form-item label="加入黑名单原因" v-if="activeKey === 'BLACK'">
          <a-textarea
            v-model:value="addForm.remark"
            placeholder="请输入供应商黑名单原因"
            :rows="4"
            style="width: 400px"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <SupplierDetails v-if="isShowCompanyDetails" :company-id="companyId" @go-back="goBack" />
    <a-modal
      v-model:visible="isShowOther"
      :maskClosable="false"
      :width="600"
      :centered="true"
      okText="确认添加"
      title="提示"
      @ok="OtherOk"
    >
      <div style="padding: 20px">
        {{ otherTitle }}
      </div>
    </a-modal>
    <DeleteBox
      :is-show="isShowDelBox"
      :ok-text="'确认移除'"
      :cancel-text="'我再想想'"
      :prompt-text="getPromptText()"
      @ok="returnOk"
      @cancel="isShowDelBox = false"
    />
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch } from 'vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import {
    deleteCompany,
    getCompanyList,
    addCompany,
    searchCompany,
    checkCompany,
  } from '/@/api/supplierManage';
  import SupplierDetails from '/@/components/SupplierDetails/index.vue';
  import { message } from 'ant-design-vue';
  import DeleteBox from '/@/components/DeleteBox/index.vue';

  const addLabelRef: any = ref(null);

  let isShowDelBox = ref(false);
  let delId = '';
  function openDelBox(id: string) {
    isShowDelBox.value = true;
    delId = id;
  }
  function returnOk() {
    isShowDelBox.value = false;
    cancleMonitor(delId);
  }
  let activeKey = ref('WHITE');
  let listData = ref([]);
  let columns = ref([
    {
      title: '序号',
      align: 'left',
      width: '50px',
      slots: { customRender: 'index' },
    },
    {
      title: '供应商名称',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'left',
      ellipsis: true,
      slots: { customRender: 'companyName' },
    },
    {
      title: '社会统一信用代码',
      dataIndex: 'creditCode',
      key: 'creditCode',
      align: 'left',
    },
    {
      title: '法人代表',
      dataIndex: 'corporationName',
      key: 'corporationName',
      align: 'left',
      width: '100px',
    },
    {
      title: '加入时间',
      dataIndex: 'createDate',
      key: 'createDate',
      width: '200px',
      align: 'left',
    },
    {
      title: '操作人员',
      dataIndex: 'createUser',
      key: 'createUser',
      align: 'left',
      width: '100px',
      slots: { customRender: 'createUser' },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
      align: 'left',
    },
  ]);
  let columnsByBlack = ref([
    {
      title: '序号',
      align: 'left',
      width: '50px',
      slots: { customRender: 'index' },
    },
    {
      title: '供应商名称',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'left',
      width: '250px',
      ellipsis: true,
      slots: { customRender: 'companyName' },
    },
    {
      title: '加入原因',
      dataIndex: 'remark',
      key: 'remark',
      align: 'left',
      width: '250px',
      ellipsis: true,
    },
    {
      title: '社会统一信用代码',
      dataIndex: 'creditCode',
      key: 'creditCode',
      width: '200px',
      align: 'left',
    },
    {
      title: '法人代表',
      dataIndex: 'corporationName',
      key: 'corporationName',
      width: '100px',
      align: 'left',
    },
    {
      title: '加入时间',
      dataIndex: 'createDate',
      key: 'createDate',
      width: '200px',
      align: 'left',
    },
  ]);
  let columnsByBlackByZutj = ref([
    {
      title: '序号',
      align: 'left',
      width: '50px',
      slots: { customRender: 'index' },
    },
    {
      title: '供应商名称',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'left',
      ellipsis: true,
      slots: { customRender: 'companyName' },
    },
    {
      title: '加入原因',
      dataIndex: 'remark',
      key: 'remark',
      align: 'left',
      width: '250px',
      ellipsis: true,
    },
    {
      title: '社会统一信用代码',
      dataIndex: 'creditCode',
      key: 'creditCode',
      align: 'left',
    },
    {
      title: '法人代表',
      dataIndex: 'corporationName',
      key: 'corporationName',
      align: 'left',
    },
    {
      title: '加入时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'left',
    },
    {
      title: '操作人员',
      dataIndex: 'createUser',
      align: 'left',
      slots: { customRender: 'createUser' },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      slots: { customRender: 'operation' },
      align: 'left',
    },
  ]);
  let pageForm = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  function changePage(val) {
    pageForm.value.limit = val;
    if (activeKey.value === 'BLACK') {
      if (typeIndex.value == 0) {
        getData();
      }
      if (typeIndex.value == 1) {
        getData('manu');
      }
      if (typeIndex.value == 2) {
        getData('credit_china');
      }
      if (typeIndex.value == 3) {
        getData('nea');
      }
      if (typeIndex.value == 4) {
        getData('other');
      }
      return
    }
    // todo
    getData();
  }
  // async function confirmDel(id: string) {
  //   await deleteCompany(id);
  //   getData();
  // }
  async function cancleMonitor(companyId: string) {
    await deleteCompany(companyId);
    if (activeKey.value === 'BLACK') {
      if (typeIndex.value == 0) {
        getData();
      }
      if (typeIndex.value == 1) {
        getData('manu');
      }
      if (typeIndex.value == 2) {
        getData('credit_china');
      }
      if (typeIndex.value == 3) {
        getData('nea');
      }
      if (typeIndex.value == 4) {
        getData('other');
      }
    } else {
      getData()
    }
  }
  function cancelDel() {
    console.log('取消');
  }
  async function getData(sou) {
    if (sou) {
      let queryData = {
        type: activeKey.value,
        limit: pageForm.value.limit,
        size: pageForm.value.size,
        sources: sou,
      };
      const res = await getCompanyList(queryData);
      listData.value = res.list;
      pageForm.value.total = res.total;
    } else {
      let queryData = {
        type: activeKey.value,
        limit: pageForm.value.limit,
        size: pageForm.value.size,
      };
      const res = await getCompanyList(queryData);
      listData.value = res.list;
      pageForm.value.total = res.total;
    }
  }
  function changeTab() {
    pageForm.value.limit = 1;
    if (activeKey.value === 'BALCK') {
      typeIndex.value = 1
      getData('manu')
      return
    }
    getData();
  }
  getData();
  let addForm = ref({
    companyId: 0,
    companyName: '',
    creditCode: '',
    corporationName: '',
    remark: '',
  });
  let isShowAdd = ref(false);
  function openAdd() {
    addForm.value = {
      companyId: 0,
      companyName: '',
      creditCode: '',
      corporationName: '',
      remark: '',
    };
    isShowAdd.value = true;
  }
  let companyList = ref([]);
  // async function getSearchList() {
  //   let queryData = {
  //     limit: 1,
  //     size: 20,
  //     keyword: addForm.value.companyName,
  //   };
  //   // companyList.value = [
  //   //   {
  //   //     id: 1,
  //   //     cid: 2,
  //   //     creditCode: 'abc',
  //   //     corporatePerson: '法人代表',
  //   //     value: '接口报错测试数据',
  //   //   },
  //   // ];
  //   // return;
  //   const res = await searchCompany(queryData);
  //   companyList.value = res.list || [];
  // }
  let timer = null;
  async function getSearchList(val: string) {
    if (!val || timer) {
      return;
    }
    if (!val.trim()) {
      return
    }
    let queryData = {
      limit: 1,
      size: 20,
      name: val,
    };
    const res = await searchCompany(queryData);
    companyList.value = res
      ? res.list.map((item) => {
          // item.label = item.companyName;
          // item.value = item.cityId;
          return item;
        })
      : [];
    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
    }, 200);
  }
  function onSelect(value: string, item: any) {
    let companyInfo = companyList.value.filter(itemFilter => itemFilter.cityId === item.value)[0]
    addForm.value.companyName = companyInfo.companyName.replace(/<\/?.+?>/g,"").replace(/ /g,"");
    addForm.value.companyId = item.value;
    addForm.value.creditCode = companyInfo.creditCode;
    addForm.value.corporationName = companyInfo.corporatePerson;
  }

  let isShowOther = ref(false);
  let otherTitle = ref('');
  // 检测公司有没有在其他名单
  async function checkCompanyInfo() {
    try {
      const checked = await addLabelRef.value.validate();
      if (checked) {
        let queryData = {
          companyId: addForm.value.companyId,
        };
        const res = await checkCompany(queryData);
        if (res.type) {
          isShowOther.value = true;
          isShowAdd.value = false;
          otherTitle.value =
            res.type === 'FOCUS'
              ? '该企业已存在重点关注名单中'
              : res.type === 'WHITE'
              ? '该企业已存在白名单中'
              : '该企业已存在黑名单中';
        } else {
          OtherOk();
        }
      }
    } finally {
    }
  }
  const OtherOk = async () => {
    let queryData = {
      type: activeKey.value,
      companyId: addForm.value.companyId,
      companyName: addForm.value.companyName,
      corporationName: addForm.value.corporationName,
      creditCode: addForm.value.creditCode,
      remark: addForm.value.remark,
    };
    if (queryData.type === 'BLACK') {
      if (typeIndex.value == 1) {
        queryData.source = 'manu'
      }
      if (typeIndex.value == 2) {
        queryData.source = 'credit_china'
      }
      if (typeIndex.value == 3) {
        queryData.source = 'nea'
      }
      if (typeIndex.value == 4) {
        queryData.source = 'other'
      }
    }
    const res = await addCompany(queryData);
    isShowAdd.value = false;
    pageForm.value.limit = 1
    if (activeKey.value === 'BLACK') {
      if (typeIndex.value == 0) {
        getData();
      }
      if (typeIndex.value == 1) {
        getData('manu');
      }
      if (typeIndex.value == 2) {
        getData('credit_china');
      }
      if (typeIndex.value == 3) {
        getData('nea');
      }
      if (typeIndex.value == 4) {
        getData('other');
      }
    } else {
      getData()
    }
    isShowOther.value = false;
    // typeIndex.value = 0;
  };
  // 添加名单
  async function addData() {
    checkCompanyInfo();
  }
  let companyId = ref('');
  // 供应商详情
  let isShowCompanyDetails = ref(false);
  function openCompanyDetails(id: string) {
    companyId.value = id;
    isShowCompanyDetails.value = true;
  }
  function goBack() {
    isShowCompanyDetails.value = false;
  }
  let typeIndex = ref(1);
  function changeType(index: number) {
    typeIndex.value = index;
    pageForm.value.limit = 1;
    if (index == 0) {
      getData();
    }
    if (index == 1) {
      getData('manu');
    }
    if (index == 2) {
      getData('credit_china');
    }
    if (index == 3) {
      getData('nea');
    }
    if (index == 4) {
      getData('other');
    }
  }
  function getPromptText() {
    if (activeKey.value === 'WHITE') {
      return '是否移除企业白名单，移除后相关企业标签将同步移除。';
    } else if (activeKey.value === 'BLACK') {
      return '是否移除企业黑名单，移除后相关企业标签将同步移除。';
    } else {
      return '是否移除企业重点关注名单，移除后相关企业标签将同步移除。';
    }
  }
</script>
<style lang="less" scoped>
  .roster {
    height: calc(100% - 50px);
    position: relative;
    .listData {
      .typeListDiv {
        display: flex;
        padding-left: 2px;
        position: relative;
        margin-bottom: 12px;
        .typeItem {
          padding: 6px 20px;
          font-size: 12px;
          color: #303133;
          border: 1px solid #dcdfe6;
          border-left: unset !important;
          cursor: pointer;
        }
        .typeItem:first-child {
          border-radius: 4px 0 0 4px;
          border-left: 1px solid #dcdfe6 !important;
        }
        .typeItem.active {
          color: #c11a20;
        }
      }
      .addBtn {
        margin-bottom: 12px;
        width: fit-content;
        height: 32px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: #1473dc;
        border: 1px solid #1473dc;
        cursor: pointer;
        padding: 5px 16px;
        box-sizing: border-box;
      }
      .addBtn1 {
        position: absolute;
        right: 0;
      }
    }
    .noData {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, 50%);
      text-align: center;
      font-size: 14px;
      color: #909399;
      display: flex;
      align-items: center;
      flex-direction: column;
      img {
        margin-bottom: 20px;
      }
    }
  }
  .otherPagination {
    width: 100%;
    height: 32px;
    background-color: #fff !important;
    display: flex;
    flex-direction: row-reverse;
  }
</style>
